<template>
  <div id="app">
    <!--vue-router中借助router-view来显示匹配的组件视图-->
    <transition name='app' mode='out-in'>
      <router-view></router-view>
    </transition>

    <Tabbar v-if='isTabbarShow'/>
  </div>
</template>

<script>
import Tabbar from '@/components/tabbar'
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: {
    Tabbar
  },
  computed: mapState('tabbar', ['isTabbarShow'])
}
</script>

<style lang='scss'>
  .app-enter-active{
    animation: move .66s;
  }
  .app-leave-active{
    animation: move .66s reverse;
  }
  @keyframes move{
    0%{
      transform: translateY(20px);
      opacity: 0;
    }
    100%{
      transform: translateY(0px);
      opacity: 1;
    }
  }

  // 修改toast弹窗样式
  .van-toast--text{
    min-width: 50px!important;
    background: pink!important;
  }
</style>
